<template>
	<div>
		<!-- <div v-for="(value, name) in statistical_data" :key="name"> -->
		<el-collapse v-model="active_name" v-for="(value, name) in statistical_data" :key="name" @change="handleCollapse">
			<el-collapse-item :name="name">
				<template #title>
					<span style="font-size: 20px;padding-left: 20px;">{{name}}</span>
				</template>
				<echart-pie :pie_title="name" :pie_data="value"></echart-pie>
			</el-collapse-item>
		</el-collapse>
		<!-- </div> -->

	</div>
</template>

<script>
	import API from '@/api/index.js'
	import EchartPie from '@/components/echarts/echart-pie.vue'

	export default {
		components: {
			EchartPie
		},
		data() {
			return {
				active_name: [],
				type_list: {},
				statistical_data: {},

				aaa: [],

        screen_min_width: document.body.clientWidth // 屏幕宽度

      }
		},
		mounted() {
      this.getScreenMinWidth();

      this.getTransmitTypes();
		},
		methods: {
      // 判断横屏
      getScreenMinWidth() {
        let self = this;
        if (self.screen_min_width < '500') {
          self.$message.error({
            message: '请用横屏查看此页面'
          });
        }
      },
			// 获取公安接口类型
			getTransmitTypes() {
				let self = this;
				API.transmitType().then(res => {
					let data = res.data.data;
					self.type_list = data;
					this.getTransmitsCount();
				}).catch(err => {
					self.$message.error(err.response.data.message)
				})
			},

			getTransmitsCount() {
				let self = this;
				API.transmitsCount().then(res => {
					for (let key in res.data.data) {
						// 更改key名
						for (let type_key in self.type_list) {
							if (key == type_key) {
								self.statistical_data[self.type_list[type_key]] = res.data.data[key];
							}
						}
					}

					for (let key2 in self.statistical_data) {
						self.statistical_data[key2].map(item => {
							item.value = item.count;
							return item;
						});
						// self.aaa.push(key2);
						// self.active_name[0] = self.aaa[0];
						self.active_name[0] = Object.keys(self.statistical_data)[0];
						// self.active_name.push(key2);
					}
				})
			},

			handleCollapse(val) {
				console.log(val)
			}

		}
	}
</script>

<style scoped lang="scss">
</style>
